<template>
  <div>
    <a-card>
      <div class="charts" id="chart1"></div>
    </a-card>
    <a-card :title="'昨天任务情况('+title+'):'">
      <div class="list">
        <div class="list-item" v-for="item in dailyTaskList" :key="item.id">
          <div :class="item.state == 0 ? 'error' : item.state == 1 ? 'success' : 'error'">
            {{ item.title }}
          </div>
          <div>{{ item.score }}</div>
          <div :class="item.state == 0 ? 'error' : item.state == 1 ? 'success' : 'error'">
            {{ item.state == 0 ? "未完成" : item.state == 1 ? "完成" : "超时" }}
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
// import moment from "moment";
import * as echarts from "echarts";
// import { getDailyTaskWithTime } from "@/api/CustomRequest";
import { getDaily } from "@/api/ApiRequest";

// 导入mixin文件
import mixin from "./mixin";

export default {
  mixins: [mixin],
  name: "taskDashboard", // 任务 任务
  data() {
    return {
      lineChart: null,
      barChart: null,
      dailyList: [],
      dailyTaskList: [],
      title: "",
    };
  },
  mounted() {
    this.init();

    this.lineChart = echarts.init(document.getElementById("chart1"));

    this.getDailyList();
  },
  methods: {
    async getDailyList() {
      let data = await getDaily({ page: 0, size: 10000 });
      this.dailyList = data;

      this.getDaily(this.dailyList[this.dailyList.length - 1].title)

      this.initLineView();
    },
    initLineView() {
      let mlist = [];
      let mvlist = [];
      let mvlist2 = [];
      this.dailyList.map((it) => {
        mlist.push(it.title);

        mvlist.push({
          name: it.title,
          value: it.taskScore,
        });

        mvlist2.push({
          name: it.title,
          value: it.taskNum,
        });
      });

      this.lineChart.setOption({
        title: {
          text: "任务完成分数",
          textStyle: {
            color: "black", // 标题颜色
            fontSize: 14, // 默认值：18
            fontStyle: "normal", // normal:正常风格（默认值）,italic:倾斜体
            fontWeight: "bold", // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 1,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        xAxis: {
          show: true,
          axisTick: {
            show: false,
            length: 20, // 竖线的长度
          },
          data: mlist,
        },
        yAxis: {
          axisLabel: {
            show: true,
          },
        },
        series: [
          {
            name: "每日总分",
            type: "line", // 设置图表类型为柱状
            data: mvlist,
          },
          {
            name: "每日完成量",
            type: "line", // 设置图表类型为柱状
            data: mvlist2,
          },
        ],
      });

      let self = this;
      this.lineChart.on("click", function (params) {
        // 控制台打印数据的名称
        self.getDaily(params.name);
      });
    },
    getDaily(title) {
      this.title = title;

      let data = [];
      this.dailyList.map((it) => {
        if (it.title == title) {
          data = it;
        }
      });

      this.dailyTaskList = JSON.parse(data.taskList);
    },
  },
};
</script>

<style lang="less" scoped>
.charts {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}
.list {
}
.list-item {
  display: flex;
  justify-content: space-between;
}
.success {
  color: black;
}
.error {
  color: red;
}
</style>
